<template>
	<block > 
		<view class="nav">
			<view class="nav-one">
				<view>交易品类</view>
				<view>最新价</view>
			</view>
			<view class="nav-two">
				<view class="n coin-name" >
					<view @tap="passUsdt(item,index)" :class="{red:i === index}"  v-for="(item,index) in marketList" :key="index" style="margin-top:20upx" >
					
					       {{item}}
					
					</view>
													
				</view>	
				<view class="aedd">
					<view style="margin-top:20upx">{{BTCUSDT}}</view>
					<view style="margin-top:20upx" class="t">{{ETHUSDT}}</view>
					<view style="margin-top:20upx" class="t">{{LTCUSDT}}</view>
					<view style="margin-top:20upx" class="t">{{HS300USDT}}</view>
					<view style="margin-top:20upx" class="t">{{IC500USDT}}</view>
				</view>
					 
			  </view>
		</view>
	</block>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() { 
			return {
				i:0
			};
		},
		props:{
			marketList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},		
		created(){			
				
		},
		mounted() {
			
		},
		computed: {							
				...mapState(['lang']),				
				...mapState('user', ['BTCUSDT']),
				...mapState('user', ['ETHUSDT']),
				...mapState('user', ['LTCUSDT']),
				...mapState('user', ['HS300USDT']),
				...mapState('user', ['IC500USDT']),	
				...mapState('user',['currency'])
		},
		methods: {	
			passUsdt(num,id){
				this.i = id
				var params = {
					name:num,
					id:id
				}
				
				this.$store.commit('user/currency',JSON.stringify(params))
				uni.navigateTo({
					url:"/pages/secondcontract/index"
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.red{
		color: blue;
	}
	
	.nav {
		width: 90%;
		margin: 0 auto;
		padding-top: 40upx;
		z-index: 9999999;
		position: relative;
		.nav-one {
			
			display: flex;
			justify-content: space-between;
			text-align: left;
			border-bottom: 1upx solid #F0F1F4;
			padding-bottom: 20upx;
			align-items: center;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(42,47,68,1);
			
		}
		.nav-two {
			display: flex;
			justify-content: space-between;
			
			align-items: center;
			
			
			.n{
				font-size:24upx;
				font-family:Roboto;
				font-weight:400;
				color:#999999;
				text-align: left;
				
				
			}
			.aedd{
				font-size:24upx;
				font-family:Roboto;
				font-weight:400;
				color:#999999;
				text-align: left;
				
			}
		}
	}
</style>
